<!DOCTYPE html>
<html lang="en">

  <head>
    <meta charset="utf-8">
    <title>Levelweb</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="">
    <meta name="author" content="">

    <link rel="stylesheet" href="js/codemirror-3.1/lib/codemirror.css">
    <link rel="stylesheet" href="js/codemirror-3.1/addon/lint/lint.css">
    <link rel="stylesheet" href="css/jquery.tagsinput.css" />
    <link rel="stylesheet" href="css/jquery.datepicker.css" />
    <link href="/css/index.css" rel="stylesheet">

  </head>
  <body>

    <header>

      <nav role="navigation" class="primary">
        <ul class="cf">
          <li>Database:</li>
          <li id="pathtodb"></li>
        </ul>
      </nav>

      <nav role="navigation" class="secondary">
        <input type="radio" id="nav-all" name="radio-nav" class="radio-nav" checked />
        <label for="nav-all">
          <div class="ss-icon">key</div>
            All Keys
          </div>
        </label>

        <input type="radio" id="nav-tag" name="radio-nav" class="radio-nav" />
        <label for="nav-tag">
          <div class="ss-icon">tag</div>
            Tagged Keys
          </div>
        </label>

        <input type="radio" id="nav-vis" name="radio-nav" class="radio-nav" />
        <label for="nav-vis">
          <div class="ss-icon">piechart</div>
            Visualize
          </div>
        </label>

        <input type="radio" id="nav-settings" name="radio-nav" class="radio-nav" />
        <label for="nav-settings">
          <div class="ss-icon">cog</div>
            Settings
          </div>
        </label>

        <!-- input type="radio" id="nav-events" name="radio-nav" class="radio-nav" />
        <label for="nav-events">
          <div class="ss-icon">stopwatch</div>
            Events
          </div>
        </label>

        <input type="radio" id="nav-replicate" name="radio-nav" class="radio-nav" />
        <label for="nav-replicate">
          <div class="ss-icon">transfer</div>
            Replicate
          </div>
        </label>

        <input type="radio" id="nav-publish" name="radio-nav" class="radio-nav" />
        <label for="nav-publish">
          <div class="ss-icon">uploadcloud</div>
            Publish
          </div>
        </label -->

      </nav>
    </header>

    <div class="main-container">

      <div class="left">

        <form id="query">

          <div class="input" id="startKeyContainer">
            <span class="add-on">Search</span>
            <input data-id="start" class="control" type="text">
          </div>
          <div class="input" id="endKeyContainer">
            <span class="add-on">End</span>
            <input data-id="end" class="control" type="text">
          </div>
          <div class="input inline-block">
            <span class="add-on">Limit Results</span>
            <input data-id="limit" id="limit" class="control" placeholder="1000" type="text">
          </div>
          <div class="input-check inline-block">
            <input type="checkbox" id="reverse" class="control checkbox" />
            <label for="reverse">Reverse</label>
          </div>
          <div class="input-check inline-block">
            <input type="checkbox" id="range" class="control checkbox" />
            <label for="range">Range</label>
          </div>

        </form>

        <div id="keyListContainer">
          <select id="keyList" multiple="">
          </select>
          <div id="noKeys" class="overlay">
            <h1 class="ss-icon">talk</h1>
            <h3>There are no keys.</h3>
          </div>
        </div>

        <div id="key-management-controls">
          <button class="button" id="refresh">
            <span class="ss-icon">refresh</span>
          </button>
          <button class="button" id="delete-keys">
            <span class="ss-icon">trash</span>
            <span class="selected-key-count"></span>
          </button>
          <button class="button" id="addto-tags">
            <span class="ss-icon">tag</span>
            <span class="selected-key-count"></span>
          </button>
        </div>
      </div>

      <div class="right">
        <textarea id="code-json">
        </textarea>
        <div id="veryLarge" class="overlay">
          <h1 class="ss-icon">ban</h1>
          <h3>The value may be too large to view.<br/>
          Click here to view anyway.</h3>
        </div>
        <div id="selectOne" class="overlay">
          <h1 class="ss-icon">navigateleft</h1>
          <h3>Select one or more keys from the list.</h3>
        </div>
      </div>

      <div id="settings" class="panel">

        <div class="input-top">
          <span class="add-on">This server's certificate</span>
          <div class="input-container">
            <textarea id="cert" disabled></textarea>
          </div>
        </div>

      </div>

      <div id="visualizations" class="panel">
        <div class="left">

          <!--

            TODO:

            - Heat Map
            - Time Series

          -->

          <div class="links-container" data-target="#treemap">
            <button class="configure ss-icon">cog</button>
            <h2 class="primary"><span class="ss-icon">grid</span>Tree Map</h2>
            <div class="links" data-group="treemap">
            </div>
          </div>
          <hr/>

          <div class="links-container" data-target="#barchart">
            <button class="configure ss-icon">cog</button>
            <h2 class="primary"><span class="ss-icon">barchart</span>Bar Chart</h2>
            <div class="links" data-group="barchart">
            </div>
          </div>
          <hr/>

          <div class="links-container" data-target="#stackedchart">
            <button class="configure ss-icon">cog</button>
            <h2 class="primary"><span class="ss-icon">rows</span>Stacked Area Chart</h2>
            <div class="links" data-group="stackedchart">
            </div>
          </div>
          <hr/>

        </div>
        <div class="right">

          <div id="treemap" class="visualization">

            <form class="options">

              <h3>Tree Map</h3>
              <hr/>
              <p>
                Build a hierarchical tree of this database by dividing keys based
                on a token.
              </p>

              <div class="input">
                <span class="add-on">Token</span>
                <input data-id="token" value="~" placeholder="~" type="text">
              </div>

              <br/>

              <p>
                Provide a name for this query so that it can be viewed later.
              </p>

              <div class="input">
                <span class="add-on">Name</span>
                <input data-id="queryName" placeholder="Unamed" type="text">
              </div>

              <input data-id="group" type="hidden" value="treemap">

              <hr/>

              <button class="button pull-right snapshot">
                <span class="ss-icon">camera</span>
                Snapshot
              </button>
              <button class="button pull-right save">
                <span class="ss-icon">file</span>
                Save
              </button>
              <button class="button submit" data-id="visualize/treemap">
                <span class="ss-icon">sync</span>
                <span class="label">Run</span>
              </button>

              <!-- br/>
              <h3>Adjustments</h3>
              <hr/>
              <p>
                After the tree map has been created, you can choose to organize
                the regions by size or by count.
              </p>

              <div class="custom-select">
                <select class="button">
                  <option value="size">Size</option>
                  <option value="count">Count</option>
                </select>
              </div -->

              <div class="close">
                <span class="ss-icon">close</span>
              </div>
            </form>

            <div class="container">
            </div>

          </div>

          <div id="timeseries" class="visualization">

            <form class="options">

              <h3>Setup</h3>
              <hr/>

              <br/>
              <h3>After</h3>
              <hr/>


              <div class="close">
                <span class="ss-icon">close</span>
              </div>
            </form>

            <div class="container">
            </div>

          </div>

          <div id="barchart" class="visualization">

            <form class="options">

              <h3>Bar Chart</h3>
              <hr/>
              
              <p>
                Select the values to be used. Where `X` is the horizontal plane
                and `Y` is the vertical.
              </p>
              <div class="input">
                <span class="add-on">Y Axis</span>
                <input class="validate-key" data-id="pathToY" placeholder="foo.bar.val" type="text">
              </div>
              <p>
                If `X` is a Javascript-parsable date, you can also specify a
                date format, hours, days, years, etc.
              </p>
              <div class="input">
                <span class="add-on">X Axis</span>
                <input class="validate-key" data-id="pathToX" placeholder="foo.bar.date" type="text">
              </div>

              <div class="input">
                <span class="add-on">X Axis Mask</span>
                <input class="validate-key" data-id="pathToXMask" placeholder="foo.bar.fancy" type="text">
              </div>

              <div class="input">
                <span class="add-on">Date Time Format</span>
                <input data-id="dateTimeFormat" placeholder="DD-MM-YY-HH-MM" type="text">
              </div>

              <p>
                To define a date range, a valid date object must be specified.
              </p>
              <div class="input">
                <span class="add-on">Start Date</span>
                <input type="text" placeholder="Optional" data-id="dateStart" class="datepicker">
              </div>
              <div class="input">
                <span class="add-on">End Date</span>
                <input type="text" placeholder="Optional" data-id="dateEnd" class="datepicker">
              </div>
              <br/>

              <p>
                Provide a name for this query so that it can be viewed later.
              </p>

              <div class="input">
                <span class="add-on">Name</span>
                <input data-id="queryName" placeholder="Unamed" type="text">
              </div>

              <br/>

              <input data-id="group" type="hidden" value="barchart">

              <hr/>
              <button class="button pull-right snapshot">
                <span class="ss-icon">camera</span>
                Snapshot
              </button>
              <button class="button pull-right save">
                <span class="ss-icon">file</span>
                Save
              </button>
              <button class="button submit" data-id="visualize/barchart">
                <span class="ss-icon">sync</span>
                <span class="label">Run</span>
              </button>

              <div class="close">
                <span class="ss-icon">close</span>
              </div>
            </form>

            <div class="container">
            </div>

          </div>

          <div id="stackedchart" class="visualization">

            <form class="options">

              <h3>Stacked Area Chart</h3>
              <hr/>
              <p>
                Graphically compare two or more quantities. Using Javascript dot
                notation, specify a path to one or more values in the JSON that 
                will occur in every key.
              </p>
              <div class="input-top validate-keys">
                <span class="add-on">Y Axis</span>
                <input data-id="pathsToValues"/>
              </div>             
              <p>
                If `X` is a Javascript-parsable date, you can also specify a
                date format, hours, days, years, etc. `X` must be numeric.
              </p>
              <div class="input">
                <span class="add-on">X Axis</span>
                <input class="validate-key" data-id="pathToX" placeholder="foo.bar.date" type="text">
              </div>
              <div class="input">
                <span class="add-on">Date Time Format</span>
                <input data-id="dateTimeFormat" placeholder="DD-MM-YY-HH-MM" type="text">
              </div>

              <p>
                If specified, data points to be plotted must have dates that 
                fall between these ranges.
              </p>
              <div class="input">
                <span class="add-on">Start Date</span>
                <input type="text" placeholder="Optional" data-id="dateStart" class="datepicker">
              </div>
              <div class="input">
                <span class="add-on">End Date</span>
                <input type="text" placeholder="Optional" data-id="dateEnd" class="datepicker">
              </div>
              <br/>

              <p>
                Provide a name for this query so that it can be viewed later.
              </p>

              <div class="input">
                <span class="add-on">Name</span>
                <input data-id="queryName" placeholder="Unamed" type="text">
              </div>

              <br/>

              <input data-id="group" type="hidden" value="stackedchart">

              <hr/>

              <button class="button pull-right snapshot">
                <span class="ss-icon">camera</span>
                Snapshot
              </button>
              <button class="button pull-right save">
                <span class="ss-icon">file</span>
                Save
              </button>
              <button class="button submit" data-id="visualize/stackedchart">
                <span class="ss-icon">sync</span>
                <span class="label">Run</span>
              </button>

              <div class="close">
                <span class="ss-icon">close</span>
              </div>
            </form>

            <div class="container">
            </div>

          </div>

          <div id="chooseVisualization" class="overlay">
            <h1 class="ss-icon">talk</h1>
            <h3>Select a visualization, configure and run it.</h3>
          </div>

          <div id="selectKeys" class="overlay">
            <h1 class="ss-icon">talk</h1>
            <h3>Query or tag keys to visualize their values.</h3>
          </div>

        </div>
      </div>

    </div>

    <script src="/socket.js"></script>
    <script src="/assets.js"></script>

    <script src="/js/visualize.js"></script>
    <script src="/js/index.js"></script>

  </body>
</html>
